<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        table{
            border-spacing: 0;
            border-collapse: collapse;
        }
        td{
            border: 1px solid black;
            padding: 6px 12px;
        }
    </style>
    <script src="./assets/jquery/jquery.min.js"></script>
    <script>
        // jquery 提供常用 四种 ajax 请求发送规则
        //  $.ajax(options)
        //          options 取值js对象，通过jquery内置的配置属性描述ajax所需要的相关参数
        //                  + 通过 method 设置,可以让该ajax发送任意类型的数据请求
        function sendAjax(){
            let options = {
                // 请求类型设置
                method:"get",
                // method:"post",
                // 请求地址配置
                url:"/ajax/test02/request",
                // 描述详解结果将已那种数据格式出现，并进行格式化处理 ，默认值 json
                dataType:"json",
                // data 定义请求参数
                data:{
                    // key:value 描述参数的相关信息,key为参数名,value参数值
                    paramA:"参数1",
                    paramB:"参数2"
                },
                // 监听了ajax状态为4，http状态小于400 的请求成功操作
                success:function (result){
                    // success 回调函数存在固定参数，该参数为请求成功后服务器响应数据
                    console.log("success:",result)
                    $("#body").html("")
                    for (let i = 0; i < result.data.length; i++) {
                        $("#body").append(`
                            <tr>
                                <td>${result.data[i].id}</td>
                                <td>${result.data[i].name}</td>
                                <td>${result.data[i].sex}</td>
                                <td>${result.data[i].username}</td>
                            </tr>
                        `)
                    }
                },
                // 监听了请求失败的操作
                error:function (){
                    console.log("error")
                    alert("请求失败")
                }
            }
            $.ajax(options);
        }
        function sendAjax2(){
            $.ajax({
                method:"post",
                url:"/ajax/test02/request",
                dataType:"json",
                data:{
                    paramA:"参数1",
                    paramB:"参数2"
                },
                success:function (result){
                    $("#body").html("")
                    for (let i = 0; i < result.data.length; i++) {
                        $("#body").append(`
                            <tr>
                                <td>${result.data[i].id}</td>
                                <td>${result.data[i].name}</td>
                                <td>${result.data[i].sex}</td>
                                <td>${result.data[i].username}</td>
                            </tr>
                        `)
                    }
                },
                error:function (){
                    console.log("error")
                    alert("请求失败")
                }
            });
        }

        //  $.get(url,params,successCallback,dataType) 只能发送get请求
        function sendGet(){
            $.get(
                "/ajax/test02/request",
                {
                    paramA:"参数1",
                    paramB:"参数2"
                },
                function (result){
                    $("#body").html("")
                    for (let i = 0; i < result.data.length; i++) {
                        $("#body").append(`
                            <tr>
                                <td>${result.data[i].id}</td>
                                <td>${result.data[i].name}</td>
                                <td>${result.data[i].sex}</td>
                                <td>${result.data[i].username}</td>
                            </tr>
                        `)
                    }
                },
                "json"
            )
        }
        //  $.post(url,params,successCallback,dataType) 只能发送post请求
        function sendPost(){
            $.post(
                "/ajax/test02/request",
                {
                    paramA:"参数1",
                    paramB:"参数2"
                },
                function (result){
                    $("#body").html("")
                    for (let i = 0; i < result.data.length; i++) {
                        $("#body").append(`
                            <tr>
                                <td>${result.data[i].id}</td>
                                <td>${result.data[i].name}</td>
                                <td>${result.data[i].sex}</td>
                                <td>${result.data[i].username}</td>
                            </tr>
                        `)
                    }
                },
                "json"
            )
        }
        //  $.getJSON(url,params,successCallback) // 只能发送get请求,会自动对响应结果进行处理,返回json格式数据

    </script>
</head>
<body>
    <input type="button" value="jquery-ajax()" onclick="sendAjax()">
    <input type="button" value="jquery-ajax2()" onclick="sendAjax2()">
    <hr>
    <input type="button" value="jquery-get()" onclick="sendGet()">
    <input type="button" value="jquery-post()" onclick="sendPost()">

    <br><br>
    <table>
        <thead>
            <tr>
                <td>id</td>
                <td>name</td>
                <td>sex</td>
                <td>username</td>
            </tr>
        </thead>
        <tbody id="body">
            
        </tbody>
    </table>
</body>
</html>